<!-- 领导力中心 -->
<template>
	<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
		<div class="leadership">
			<rollback :back="1"></rollback>
			<div class="leadership-top">
				<div class="leadership-top-bg">
					<van-image width="100%" :src="require('../../assets/imgs/leadershipTopBg.png')"></van-image>
				</div>
				<div class="leadership-title"> 领导力中心 </div>
				<div class="leadership-info">
					<div class="leadership-info-bg">
						<van-image width="100%" :src="require('../../assets/imgs/leadershipInfoBg.png')"></van-image>
					</div>
					<div class="leadership-lv">{{'领导力 Ⅳ级'}}</div>
					<div class="leadership-lv-hint">{{'累积学习领导力＞100'}}</div>
					<div class="leadership-lv-hint">{{'累积提供领导力＞100'}}</div>
				</div>
			</div>
			<div class="menu">
				<van-row type="flex" justify="center">
					<van-col span="7" v-for="item in menu" :key="item.name">
						<div class="menu-item" @click="item.click">
							<van-image width="1.16rem" height="1.16rem" :src="item.img"></van-image>
							<div class="menu-name">{{item.name}}</div>
						</div>
					</van-col>
				</van-row>
			</div>
		</div>
	</van-pull-refresh>
</template>

<script>
	import {
		Toast
	} from 'vant';


	import Rollback from '../../components/Rollback.vue';

	export default {
		name: 'leadership',
		components: {
			Rollback
		},
		data() {
			return {
				isLoading: false,
				menu: [{
						name: '学习中心',
						click: this.goLearn,
						img: require('../../assets/imgs/leadership-learning.png')
					},
					{
						name: '我的收藏',
						click: this.goCollect,
						img: require('../../assets/imgs/leadership-collect.png')
					},
					{
						name: '经验分享',
						click: this.goExperience,
						img: require('../../assets/imgs/leadership-share.png')
					},
					{
						name: '难题咨询',
						click: this.goProblem,
						img: require('../../assets/imgs/leadership-consult.png')
					},
					{
						name: '自我评价',
						click: this.goMytest,
						img: require('../../assets/imgs/leadership-appraisal.png')
					},
					{
						name: '我的信息',
						click: this.goMessage,
						img: require('../../assets/imgs/leadership-user-info.png')
					}
				]
			}
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
				}, 10000);
			},
			goCollect() {
				this.$router.push('/collect-list')
			},
			goLearn() {
				this.$router.push('/learn')
			},
			goExperience() {
				this.$router.push('/experience-share')
			},
			goProblem(){
				this.$router.push('/problem-consultation')
			},
			goMessage() {
				this.$router.push('/mymessage')
			},
			goMytest() {
				this.$router.push('/mytest')
			}
		}
	}
</script>

<style scoped>
	.van-pull-refresh {
		min-height: 100vh;
	}

	.van-pull-refresh__track {
		min-height: 100vh;
	}

	.leadership {
		width: 100%;
		height: 100%;
	}

	.leadership-top {
		width: 100%;
	}

	.leadership-top-bg {
		width: 100%;
		position: relative;
		height: 0;
		z-index: -2;
	}

	.leadership-title {
		height: 0.62rem;
		font-size: 0.32rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		background-color: transparent;
		color: #FFFFFF;
		text-align: center;
		padding-top: 0.18rem;
	}

	.leadership-info {
		width: 100%;
		position: relative;
		height: 5rem;
		padding: 1.4rem 0.75rem 0;
	}

	.leadership-info-bg {
		width: 100%;
		margin-top: 0.7rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.leadership-lv {
		font-size: 0.44rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 0.6rem;
		background: linear-gradient(180deg, #E6C383 0%, #F7E3BF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		padding: 0.44rem 0 0.44rem 0.46rem;
	}

	.leadership-lv-hint {
		padding: 0 0 0.06rem 0.46rem;

		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #b1b1b1;
		line-height: 0.34rem;
	}

	.menu {}

	.menu-item {
		text-align: center;

		margin: 0.3rem 0;
	}

	.menu-name {
		height: 0.44rem;
		font-size: 0.3rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #949494;
		line-height: 0.44rem;
		margin-top: 0.2rem;
	}
</style>
